<template>
    <div>
<!--        <i class="el-icon-circle-plus-outline"  @click="dialogFormVisible = true"></i>-->
        <el-button type='warning' @click='dialogFormVisible = true' class='btn' style='display: inline-block'>点击添加</el-button>
        <el-dialog
            title="新增/修改题目信息"
            :visible.sync="dialogFormVisible"
            @close="clear">
            <el-form v-model="form" style="text-align: left" ref="dataForm">
                <el-form-item label="题目名称" :label-width="formLabelWidth" prop="probName">
                    <el-input v-model="form.probName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="作者" :label-width="formLabelWidth" prop="probAuthor">
                    <el-input v-model="form.probAuthor" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学校" :label-width="formLabelWidth" prop="probSchool">
                    <el-input v-model="form.probSchool" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="时间限制" :label-width="formLabelWidth" prop="timeLimit">
                    <el-input v-model="form.timeLimit" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="内存限制" :label-width="formLabelWidth" prop="memoryLimit">
                    <el-input v-model="form.memoryLimit" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="题目难度" :label-width="formLabelWidth" prop="difficulty">
                    <el-input v-model="form.difficulty" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="题面附件(.html)" :label-width="formLabelWidth" prop="attachmentUrl" >
<!--                    <el-input v-model="attachmentUrl"></el-input>-->
                    <el-upload
                        class="upload-demo"
                        drag
                        action='/api/file/uploadHtml'
                        name='file'
                        accept='.html'
                        :before-upload='beforeUpload'
                        :limit="1"
                        :on-success="handleUploadSuccess"
                        :on-remove='handleUploadRemove'
                    >
                        <i class='el-icon-upload'></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传 html 文件，且不超过5MB</div>
<!--                        <el-button type="primary" @click="handleUpload">确 定</el-button>-->
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type='primary' :disabled='allFilled()' @click="onSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'EditForm',
    props: {
        tableLen: {
            type: Number
        }
    },
    data () {
        return {
            dialogFormVisible: false,
            form: {
                probID: 0,
                probName: '',
                probAuthor: '',
                probSchool: '',
                timeLimit: '',
                memoryLimit: '',
                difficulty: 0,
                upload: 0
            },
            fileList: [],
            formLabelWidth: '120px'
        }
    },
    methods: {
        clear () {
            this.form = {
                probName: '',
                probAuthor: '',
                probSchool: '',
                timeLimit: '',
                memoryLimit: '',
                difficulty: 0,
                upload: 0
            }
        },
        allFilled() {
            return !(this.form.probName &&
                this.form.probAuthor &&
                this.form.probSchool &&
                this.form.memoryLimit &&
                this.form.timeLimit &&
                this.form.difficulty &&
                this.form.upload);

        },
        handleUploadSuccess :function(response, file, fileList) {
            // console.log(response)
            this.form.upload = 1
        },
        handleUploadRemove :function() {
            this.form.upload = 0
        },
        beforeUpload(file) {
            const isHTML = file.type === 'text/html';
            if(!isHTML) {
                this.$message.error('不符合格式')
            }
            return isHTML
        },
        onSubmit () {
            console.log(this.form.probID)
            if(this.form.probID) {
                this.$axios
                    .post('/problems', {
                        probID: this.form.probID,
                        probName: this.form.probName,
                        probAuthor: this.form.probAuthor,
                        probSchool: this.form.probSchool,
                        timeLimit: this.form.timeLimit,
                        memoryLimit: this.form.memoryLimit,
                        difficulty: this.form.difficulty
                    }).then(resp => {
                    if (resp && resp.status === 200) {
                        this.dialogFormVisible = false
                        this.$emit('onSubmit')
                    }
                })
            } else {
                this.$axios
                    .post('/problems', {
                        probName: this.form.probName,
                        probAuthor: this.form.probAuthor,
                        probSchool: this.form.probSchool,
                        timeLimit: this.form.timeLimit,
                        memoryLimit: this.form.memoryLimit,
                        difficulty: this.form.difficulty

                    }).then(resp => {
                    if (resp && resp.status === 200) {
                        this.dialogFormVisible = false
                        this.$emit('onSubmit')
                    }
                })
            }
        },
        onUpload() {
            this.$axios
                .post('/file/upload', {
                    fileList: this.fileList
                }).then(resp => {
                if (resp && resp.status === 200) {
                    console.log("success")
                }
                else {
                    console.log("failure")
                }
            })
        }
    }
}
</script>

<style scoped>
.el-icon-circle-plus-outline {
    margin: 10px 10px 10px 10px;
    font-size: 20px;
    float: left;
    cursor: pointer;
    color: #8c939d;
}
</style>


